<template>
  <div class="dashboard">
    <el-date-picker
      v-model="value"
      type="daterange"
      align="right"
      unlink-panels
      value-format="yyyy-MM-dd"
      range-separator="至"
      start-placeholder="开始日期"
      end-placeholder="结束日期"
      :picker-options="pickerOptions"
      @change="changeDate"
    >
    </el-date-picker>
    <Echarts :option="option"></Echarts>
  </div>
</template>
<script>
import moment from 'moment'
import Echarts from '@/components/Echarts'
import { getAllDays } from '@/utils'
moment.locale('zh-cn')

export default {
  components: {
    Echarts
  },
  data() {
    return {
      pickerOptions: {
        shortcuts: [
          {
            text: '最近一周',
            onClick(picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
              picker.$emit('pick', [start, end])
            }
          },
          {
            text: '最近一个月',
            onClick(picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
              picker.$emit('pick', [start, end])
            }
          },
          {
            text: '最近三个月',
            onClick(picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
              picker.$emit('pick', [start, end])
            }
          }
        ]
      },
      value: [moment().startOf('week').format('YYYY-MM-DD'), moment().format('YYYY-MM-DD')],
      option: {
        legend: {},
        tooltip: {
          trigger: 'axis'
          // formatter: '{a} <br/>{b} : {c}%'
        },
        toolbox: {
          feature: {
            restore: {},
            saveAsImage: {}
          }
        },
        xAxis: [
          {
            type: 'category',
            data: []
          }
        ],
        yAxis: [
          {
            type: 'value'
          }
        ],
        series: [
          {
            name: '业务指标',
            type: 'line',
            data: [100, 30, 140, 20, 34, 43, 434]
          },
          {
            name: '业务',
            type: 'line',
            data: [110, 50, 40, 120, 23, 43, 132]
          }
        ]
      }
    }
  },
  created() {
    this.changeDate()
  },
  methods: {
    changeDate() {
      const [start, end] = this.value
      this.option.xAxis[0].data = getAllDays(start, end)
    }
  }
}
</script>
<style lang="scss" scoped>
.dashboard {
  .bfc {
    .wrapper {
      //   overflow: hidden;
      p {
        margin: 20px 0;
      }
    }
    > p {
      margin: 10px 0;
    }
  }
}
</style>
